<template>
	<view class="container">
		<view class="address-box">
			<view class="address-info-box">
				<view class="name_and_phone">
					<view class="name">{{addressData.name}}</view>
					<view class="phone">{{addressData.phone}}</view>
				</view>
				<view class="address">
					{{addressData.province || ""}}{{addressData.area}}
				</view>
			</view>
			<view class="choose-other">
				<uni-icons type="right" size="16"></uni-icons>
			</view>
		</view>
		<view class="order-box">
			<view class="size-item" v-for="size,sIdx in goodsSizeList" :key="sIdx">
				<view class="size-info">
					<image :src="size.icon"></image>
					<view class="size-name">{{size.name}}</view>
					<text class="price">￥{{size.unitPrice}}</text>
				</view>
				<uni-number-box class="uni-number-box" v-model="size.buyNumber" :min="0"></uni-number-box>
			</view>

			<view class="info-item">
				<view class="label">
					商品金额
				</view>
				<view class="value">
					{{payAmount}}
				</view>
			</view>
			<view class="info-item">
				<view class="label">
					运费
				</view>
				<view class="value">

				</view>
			</view>
			<view class="info-item">
				<view class="label">
					手机号码
				</view>
				<view class="value">
					<input type="text" placeholder="方便商家或送货员及时与您沟通">
				</view>
			</view>
			<view class="info-item-text-area">
				<view class="label">
					备注
				</view>
				<view class="value">

				</view>
			</view>
		</view>
		<view class="btn-box">
			<button @click="submit">去支付</button>
		</view>
	</view>
</template>

<script>
	import { addOrderApi } from '@/api/orders'
	import { pageListAddressApi	} from '@/api/user'
	import { cartGoodsSizeListApi,updateCartApi	} from "@/api/goods";
	export default {
		data() {
			return {
				maskState: 0, //优惠券面板显示状态
				desc: '', //备注
				payType: 1, //1微信 2支付宝
				goodsSizeList: [],
				goodsSizeList2: [{name: 'FEWFE'}],
				addressData: {},
				orderId: 0,
				sense: ''
			}
		},
		computed: {
			payAmount () {
				let amount = 0
				if(this.goodsSizeList && this.goodsSizeList.length>0) {
					console.log(this.goodsSizeList);
					console.log(this.goodsSizeList2);
					this.goodsSizeList.forEach(item=>{
						amount += item.unitPrice * item.buyNumber
					})
				}
				return amount.toFixed(2)
			}
		},
		onLoad(option) {
			//商品数据
			if(option.data) {
				this.goodsSizeList = JSON.parse(option.data)
			}
			if (option.sense) {
				this.sense = option.sense
			}
			console.log(this.goodsSizeList);
			this.getDefaultAddress()
		},
		methods: {
			numberChange(data) {
				this.number = data.number;
			},
			changePayType(type) {
				this.payType = type;
			},
			async createOrder() {
				let goodsList = []
				this.goodsSizeList.forEach(item => {
					// 订单详情过来时 item.id 即规格id
					// 购物车过来时 item.goodsSizeId 即规格id
					goodsList.push({goodsSizeId: item.goodsSizeId || item.id,number:item.buyNumber})
				})
				let params = {"goodsList": goodsList}
				let ret = await addOrderApi(params)
				console.log(ret);
				if(ret && ret.code === 200) {
					this.goodsSizeList.forEach(item => {
						this.deleteFromCart(item)
					})
					return ret.data
				}
			},
			async deleteFromCart(row) {
				if (this.sense == 'cart') {
					// 从购物车删除相应商品
					let ret = await updateCartApi({id: row.id,goodsSizeId: row.goodsSizeId,buyNumber: 0})
				}
			},
			async submit() {
				let payAmount = this.payAmount
				if (payAmount) {
					if(!this.orderId) {
						this.$api.msg("开始创建订单")
					}
					this.orderId = await this.createOrder()
					console.log("this.orderId",this.orderId)
					if(this.orderId) {
						
						uni.redirectTo({
							url: '/pages/money/pay?orderId='+this.orderId
						})
					}
				}
			},
			async getDefaultAddress() {
				let ret = await pageListAddressApi()
				if (ret && ret.code == 200) {
					if (ret.rows && ret.rows.length>0) {
						this.addressData = ret.rows[0]
					}
				}
			},
			stopPrevent() {}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: $page-color-base;
		padding-bottom: 100upx;
	}

	.container {
		background: #F5F5F9;
		padding: 24upx;
	}

	.address-box {
		display: flex;
		justify-content: space-between;
		align-items: center;

		border-radius: 16upx;
		background-color: #fff;

		.address-info-box {
			padding: 24upx;

			.name_and_phone {
				display: flex;

				font-weight: 600;
				font-size: 28rpx;
				color: #23242E;
				line-height: 42rpx;

				.phone {
					margin-left: 34upx
				}
			}

			.address {
				margin: 8upx 0;
				font-size: 28rpx;
				color: #23242E;
				line-height: 42rpx;
			}
		}
	}

	.order-box {
		margin-top: 24upx;
		border-radius: 16upx;
		background-color: #fff;
		padding: 24upx;

		.info-item {
			font-size: 28rpx;
			color: #23242E;
			height: 96upx;
			line-height: 96rpx;
			border-bottom: 1upx solid #E8E8E8;
			display: flex;
			justify-content: space-between;
		}

		.info-item-text-area {
			font-size: 28rpx;
			color: #23242E;
		}
	}

	.btn-box {
		position: absolute;
		width: 750upx;
		left: 0;
		bottom: 0;
		height: 200upx;

		button {
			width: 702rpx;
			height: 88rpx;
			background: #3EB3F3;
			border-radius: 50rpx;
			color: white;
		}
	}

	.size-item {
		margin-top: 24upx;
		margin-bottom: 24upx;
		display: flex;
		align-items: center;
		background: white;

		.size-info {
			display: flex;
			align-items: center;

			image {
				width: 102upx;
				height: 102upx;
			}

			.size-name {
				margin: 0 24upx;
				font-weight: 600;
				font-size: 28rpx;
				color: #23242E;
			}

			.price {
				font-size: 28rpx;
				color: #FF5C5C;
				line-height: 42rpx;
			}
		}

		.uni-number-box {
			position: relative;
			margin-top: 48upx;
		}
	}
</style>